<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>队伍</title>
  </head>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <link
    href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
    rel="stylesheet"
  />
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <link href="cdn/all.css" media="screen" rel="stylesheet" />
  <link href="css/team.css" media="screen" rel="stylesheet" />
  <script src="./js/star.js"></script>

  <body>
    <div id="app">
      <star>
        <div class="container">
          <div>
            <div class="list-item">
              <el-badge :value="null" class="item">
                <el-button @click="dialogFormVisible = true"  size="large">创建队伍</el-button>
                <div  style="display: none">
                  <input ref="imgs" type="file" @change="getFile" name="file" accept="image/*">
                </div>
                <el-dialog :visible.sync="dialogFormVisible" title="创建队伍">
                    <span @click="openupload" >
                        <el-avatar :src="team.image" ></el-avatar>
                    </span>
                  <el-form :model="team">
                    <el-form-item :label-width="formLabelWidth" label="队伍昵称:">
                      <el-input autocomplete="off" maxlength="36" v-model="team.name">{{team.name}}</el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="描述:">
                      <el-input
                              type="textarea"
                              :rows="3"
                              placeholder="队伍描述"
                              v-model="team.description">
                      </el-input>
                    </el-form-item>

                    <el-form-item :label-width="formLabelWidth" label="最大人数:">
                      <template>
                        <el-input-number v-model="team.max_num" @change="handleChange" :min="2"></el-input-number>
                      </template>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="权限(是否公开):">
                      <el-switch
                              v-model="team.status"
                              inactive-text="公开"
                              active-value="0">
                      </el-switch>
                      <el-switch
                              v-model="team.status"
                              inactive-text="私有"
                              active-value="1">
                      </el-switch>
                      <el-switch
                              v-model="value2"
                              @change="isHidden()"
                              inactive-text="是否加密"
                              active-value="true">
                      </el-switch>
                      <div id="passwordInput"
                           class="input-hidden">
                        <el-input
                                placeholder="请输入密码"
                                v-model="team.password"
                                show-password
                        ></el-input>
                      </div>
                    </el-form-item>


                  </el-form>

                  <div class="dialog-footer" slot="footer">
                    <el-button @click="addTeam" type="primary" >创建</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                  </div>
                </el-dialog>
              </el-badge>
            </div>
<!--            <div class="list-item">-->
<!--              <el-badge :value="12" class="item">-->
<!--                <el-button size="large">申请列表</el-button>-->
<!--              </el-badge>-->
<!--            </div>-->
          </div>
          <div class="item3">
            <div class="users">
              <div class="user-item" id="user-item-container" v-for="team in teams">
                <div class="user-img">
                  <a href="#">
                    <img :src="team.image" />
                  </a>
                </div>
                <div class="user-xinxi">
                  <p class="niceng">{{team.name}}</p>
                  <div class="iszaixian">
                    <p class="max-members">人数:{{team.num}}/{{team.maxNum}}</p>
                  </div>
                  <p style="display: none" class="team-id">{{team.id}}</p>
                </div>
                <div class="butfa">
                  <el-button class="el-button" type="primary">发消息</el-button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </star>
    </div>
  </body>
  <script>
    var v = new Vue({
      el: "#app",
      data: {
        value2: true,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        teams:{},
        team: {
          id: '',
          name: "",
          description: "",
          maxNum: "",
          password: "",
          image:"",
          userid: "",
          status: "",
        },
        value1:"",
      },
      created() {
        let token = sessionStorage.getItem("Token");
        axios.defaults.headers.common['Token'] = token;
        axios.get("/team/team/getTeam").then(res=>{
          if (res.data.code == 1) {
            this.teams = res.data.data;
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error',
            });
          }
        }).catch(error => {
          // 处理500错误
          if (error.response && error.response.status === 500) {
            this.$message({
              message: '登录信息不存在或者过期',
              type: 'error',
            });
          } else {
            // 处理其他错误
            this.$message({
              message: '请求失败，请检查网络或联系管理员。',
              type: 'error',
            });
          }
        });
      },
      methods: {
        addTeam(){
          // const userIdElement = this.$el.querySelector('.user-id');
          // // 获取其内容
          // const userId = userIdElement ? userIdElement.innerText : null;
          // console.log('用户ID:', userId);
          // this.team.userid="1";
          if (this.team.status===false){
            alert("请选择权限");
          }else{
          axios.post("/team/team/addTeam", this.team).then(res => {
            if (res.data.code == 1) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              window.location.reload();
            }
          }).catch(error => {
            console.error('发生错误：', error);
            // 在这里处理错误
          });
          }
        },
        isHidden(){
          var inputElement = document.querySelector('#passwordInput');
          if (this.value2) {
            inputElement.style.display = 'block';  // 显示 <el-input>
          } else {
            inputElement.style.display = 'none';   // 隐藏 <el-input>
          }
        },
        openupload(){
          this.$refs.imgs.click();
        },
        getFile(event) {
          this.file = event.target.files[0];
          let file = new FormData();
          file.append('file', this.file);
          this.uploadImg(file);
        },
        uploadImg(file){
          axios.post("star-other/upload/one/image",file, {
            headers: {
              'Content-Type': 'multipart/form-data' // 设置请求头为 multipart/form-data
            }
          }).then(res=>{
            console.log(res)
            this.team.image=res.data;
          })
        },
        handleChange(value) {
          console.log(value);
        }
      },
    });
  </script>
</html>
